<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: burlywood;
			}
			h3{
				padding-left:18px ;
				background-color:red ;
				color: white;
			}
			ul li{
				list-style: none;
			}
			li{
				line-height: 30px;
				border-bottom-style:dashed ;
				border-bottom-width: 1px;
				background-color: #FFFFFF;
			}
			a:hover{
				color: red;
				text-decoration: none;
			}
			 a span{
				color: #FFFFFF;
				font-weight: bold;
				margin-right: 10px;
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #373b3c;
				line-height: 20px;
				text-align: center;
			}
			a:hover span{
				background: #E9185A;
			}
			li:hover .first{
				text-align: center;
				display: block;
				background-image: url(../img/icon-1.jpg);
				background-repeat: no-repeat;
				background-position-x: 50px;
				height: 200px;
			}
			li:hover .first{
				text-align: center;
				display: block;
				background-image: url(../img/彩妆热卖产品列表/icon-1.jpg);
				background-repeat: no-repeat;
				background-position-x: 50px;
				height: 200px;
			}
			li:hover .second{
				text-align: center;
				display: block;
				background-image: url(../img/彩妆热卖产品列表/icon-2.jpg);
				background-repeat: no-repeat;
				background-position-x: 50px;
				height: 200px;
			}
			li:hover .third{
				text-align: center;
				display: block;
				background-image: url(../img/彩妆热卖产品列表/icon-3.jpg);
				background-repeat: no-repeat;
				background-position-x: 50px;
				height: 200px;
			}
			li:hover .fouth{
				text-align: center;
				display: block;
				background-image: url(../img/彩妆热卖产品列表/icon-4.jpg);
				background-repeat: no-repeat;
				background-position-x: 50px;
				height: 200px;
			}
			.main{
				width: 320px;
				margin-top: 20px;
				margin-left: 20px;
			}
			.first{
				display: none;
				color: #E9185A;
				font-size: 10px;
				font-weight: 500;
			}
			.second{
				display: none;
				color: #E9185A;
				font-size: 10px;
				font-weight: 500;
			}
			.third{
				display: none;
				color: #E9185A;
				font-size: 10px;
				font-weight: 500;
			}
			.fouth{
				display: none;
				color: #E9185A;
				font-size: 10px;
				font-weight: 500;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<h3>大家都喜欢的彩妆</h3>
			<ul>
				<li><a><span>1</span> Za姬芮新能真皙美白隔离霜 35g
					<div class="first"><img src="../img/icon-1.jpg"/> 
						<br/> ￥62.00 最近69122人购买
					</div>
				</a></li>
				<li><a><span>2</span> 美宝莲精纯矿物奇妙新颜乳霜BB霜30ml 
					<div class="second"><img src="../img/icon-2.jpg" />
						<br /> ￥89.00 最近13610人购买
					</div>
				</a></li>
				<li><a><span>3</span> 菲奥娜水漾CC霜40g 
					<div class="third"><img src="../img/icon-3.jpg" />
						<br />￥59.90 最近13403人购买
					</div>
				</a></li>
				<li><a><span>4</span> DHC 蝶翠诗橄榄卸妆油 200ml
					<div class="fouth"><img src="../img/icon-4.jpg" />
						<br /> ￥169.00 最近16757人购买
					</div>
				</a></li>
			</ul>
		</div>
	</body>
</html>








 



